<template>
  <div class="drag-container">
    <div class="left">
      <div
        :class="['drag-item', { drag: isDrag }]"
        draggable="true"
        @dragstart="dragstart"
        @drag="drag"
        @dragend="dragend"
      >
        {{ str }}
      </div>
    </div>
    <div
      class="right"
      @dragenter="dragenter"
      @dragover="dragover"
      @dragleave="dragleave"
      @drop="drop"
    ></div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

let str = ref("可拖拽");
let isDrag = ref(false);
const dragstart = () => {
  console.log("dragstart");
};
const drag = () => {
  console.log("drag");
  str.value = "拖拽中";
  isDrag.value = true;
};
const dragend = () => {
  console.log("dragend");
  str.value = "可拖拽";
  isDrag.value = false;
};
const dragenter = () => {
  console.log("dragenter");
};
const dragover = (e) => {
  // 有了这个阻止默认行为，drop事件才会生效
  e.preventDefault();
};
const dragleave = () => {
  console.log("dragleave");
};
const drop = () => {
  console.log("drop");
};
</script>
<style lang="scss" scoped>
.drag-container {
  width: 100%;
  height: 100%;
  display: flex;
  & > div {
    padding: 10px;
    border: 1px solid #000;
  }
  .left {
    width: 200px;
    .drag-item {
      border: 1px solid #000;
      padding: 10px;
      text-align: center;
      cursor: move;
      &.drag {
        color: red;
      }
    }
  }
  .right {
    flex: 1;
  }
}
</style>
